<template>
  <div style="margin: 20px">
    <el-card>
      <el-header>上传基础数据</el-header>
      <div style="margin-bottom: 10px; display: flex">
        <el-form :model="dlgState.form" ref="dlg_form" label-position="left" label-width="120px">
          <el-form-item label="数据文件名称" prop="name" required>
            <el-input v-model="dlgState.form.name" style="width: 400px"
                      placeholder="例：厂修参数"></el-input>
          </el-form-item>
          <el-form-item label="数据文件描述" prop="name">
            <el-input v-model="dlgState.form.description" type="textarea" style="width: 400px"
                      placeholder="例：货车、动车厂修参数"></el-input>
          </el-form-item>
          <el-form-item label="数据文件" prop="file" required>
            <el-upload action="#" :auto-upload="false" :multiple="false" :file-list="fileList" :limit="1"
                       :on-change="changePic" :on-remove="removePic">
              <el-button type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="启用时间" prop="startTime" required>
            <el-input v-model="dlgState.form.startTime" style="width: 220px" placeholder="例：2000/01/01"/>
          </el-form-item>
          <el-form-item label="失效时间" prop="expireTime" required>
            <el-input v-model="dlgState.form.expireTime" style="width: 220px" placeholder="例：2001/01/01"/>
          </el-form-item>
          <el-button type="primary" @click="doAdd">
            上传
          </el-button>
        </el-form>

      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
import basisApi from "@/api/basis/basis";
import {ElMessage} from "element-plus";

const dlgState = reactive({
  form: {
    name: "",
    url: "",
    description: "",
    uploadTime: new Date(),
    startTime: "",
    expireTime: "",
    uploadUser: "",
    file: null
  },
});
const fileList = ref([]);

const changePic = (file: any, fileList: any) => {
  dlgState.form.file = file.raw;
};
//删除文件
const removePic = () => {
  dlgState.form.file = null;
};

const doAdd = () => {
  basisApi
      .add({
        name : dlgState.form.name,
        url : dlgState.form.url,
        description : dlgState.form.description,
        uploadTime : null,
        startTime : dlgState.form.startTime,
        expireTime : dlgState.form.expireTime,
        uploadUser : dlgState.form.uploadUser,
        file : dlgState.form.file
      })
      .then((res) => {
        if (res.status === 200) {
          if (res.data.code === 500) {
            ElMessage.error(res.data.message);
          } else {
            ElMessage.success("操作成功");
            dlgState.form.name = "";
                dlgState.form.description= "";
                dlgState.form.startTime =  "";
                dlgState.form.expireTime = "";
                dlgState.form.file = null;
          }
        } else {
          ElMessage.error("操作失败")
        }
      });

};

</script>
<style scoped lang="scss">

</style>